<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 实例讲解--轮播图 </title>
    <style>
        /* 全局样式：margin,padding,list-style */
        *{
            box-sizing:border-box;
        }
        body{
            background:#000;
            margin:0;
        }
        ul{
            margin:0;
            padding:0;
            list-style:none;
        }
        img{
            display:block;
            width:100%;
        }
        .banner{
            width:500px;
            margin:50px auto;
            background:#fff;
            border-radius:10px;
            padding:10px;
            position:relative;
        }
        .list{
            position:relative;
            height:170px;
        }
        .list li{
            position:absolute;
        }
        .nums{
            position:absolute;
            right:15px;
            bottom:15px;
            z-index: 5;
        }
        .nums li{
            display:inline-block;
            width:30px;
            height:30px;
            text-align: center;
            line-height:30px;
            border-radius:50%;
            background:red;
            color:#fff;
            cursor:pointer;
        }
        .nums li.active{
            background:blue;
        }
        .current{
            z-index: 3;
        }
    </style>
</head>
<body>
<div class="banner">
    <ul class="list">
        <li><img src="img/01.jpg" alt=""/> </li>
        <li><img src="img/02.jpg" alt=""/> </li>
        <li><img src="img/03.jpg" alt=""/> </li>
        <li><img src="img/04.jpg" alt=""/> </li>
        <li><img src="img/05.jpg" alt=""/> </li>
    </ul>
    <ul class="nums">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
</body>
<script>
    //第一步：获取所需要的所有的标签元素
    var imgList = document.querySelectorAll('.list li')
    var numList = document.querySelectorAll('.nums li')
    var div = document.querySelector('.banner')
    // 设置默认的显示图片
    var num = 2
    function show(num){
        //            清空其他标签的类名
        for( var j = 0; j < imgList.length; j++ ){
            imgList[j].className = ''
            numList[j].className = ''
        }
        //            再给当前的标签添加类名
        imgList[num].className = 'current'
        numList[num].className = 'active'
    }
    show(num)
//    手动轮播图：当鼠标划过某数字时，与该数字索引值相同的图片显示
    for( var i = 0; i < imgList.length; i++ ){
//        获取索引值
        numList[i].index = i
        numList[i].onmouseover = function(){
            show(this.index)
//  当鼠标离开数字的时候，图片自动跳转下一张
            num = this.index
        }
    }
//    自动轮播图
    function autoPlay(){
        num++
        if( num >= imgList.length ){
            num = 0
        }
        show(num)
    }

    var  timer = setInterval(autoPlay, 1000)
//    当鼠标划过图片时，停止图片轮播
    div.onmouseover = function(){
        clearInterval(timer)
    }
//    当鼠标离开图片的时候，继续图片轮播
    div.onmouseleave = function(){
        timer = setInterval(autoPlay, 1000)
    }
</script>
</html>